<template>
  <el-dialog
    destroy-on-close
    title="选择人员"
    :close-on-click-modal="false"
    :visible.sync="localVisible"
    width="1200px"
    @open="onSearch"
    @close="onClose"
  >
    <span>
      <el-form class="searchForm" :inline="true" :model="queryForm" label-width="90px">
        <el-form-item label="名称">
          <el-input v-model="queryForm.username"> </el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-select
            v-model="queryForm.orgid"
            style="width: 170px"
            placeholder="请选择"
            :disabled="checkOrgID != ''"
            clearable
          >
            <el-option
              v-for="(item, index) in orgList"
              :key="'orgs' + index"
              :label="item.orgname"
              :value="`${item.id}`"
            >
              {{ item.orgname }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位">
          <el-select
            v-model="queryForm.duty"
            style="width: 170px"
            placeholder="请选择"
            :disabled="checkPostID != ''"
            clearable
          >
            <el-option
              v-for="(item, index) in dutyList"
              :key="'dutys' + index"
              :label="item.dutyname"
              :value="`${item.id}`"
            >
              {{ item.dutyname }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="onSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        v-loading="loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        height="500"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column :resizable="false" label="操作">
          <template slot-scope="scope">
            <el-link type="success" @click="selectName(scope.row)">选择</el-link>
          </template>
        </el-table-column>
        <el-table-column :resizable="false" prop="username" label="姓名" min-width="100" />
        <el-table-column :resizable="false" prop="orgname" label="部门" min-width="100" />
        <el-table-column :resizable="false" prop="dutyname" label="岗位" min-width="100" />
      </el-table>
    </span>
  </el-dialog>
</template>

<script>
import { UserInfoGet, CheckOrgList, List } from '@/api/index'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    checkPostID: {
      default: ''
    },
    checkOrgID: {
      default: ''
    }
  },
  data() {
    return {
      queryForm: {
        username: '',
        orgid: this.checkOrgID,
        duty: this.checkPostID
      },
      tableData: [],
      dutyList: [],
      orgList: [],
      loading: true,
      localVisible: this.visible
    }
  },
  watch: {
    visible(newVal) {
      this.localVisible = newVal
    },
    localVisible(newVal) {
      this.$emit('update:visible', newVal)
    },
    checkOrgID(newVal) {
      this.queryForm.orgid = newVal
    },
    checkPostID(newVal) {
      this.queryForm.duty = newVal
    }
  },
  methods: {
    async onSearch() {
      this.loading = true
      if (this.dutyList.length < 1) {
        await List({}).then(result => {
          this.dutyList = result.content
        })
      }
      if (this.orgList.length < 1) {
        await CheckOrgList({}).then(result => {
          this.orgList = result.content
        })
      }

      await UserInfoGet(this.queryForm)
        .then(result => {
          if (result.success) {
            var content = result.content || []
            this.tableData = content
          } else {
            this.$message.error(result.message)
          }
          this.loading = false
        })
        .catch(err => {
          this.loading = false
        })
    },
    onClose(data) {
      this.tableData = []
      this.localVisible = false
      this.queryForm = {
        username: '',
        orgid: '',
        duty: ''
      }
      this.tableData = []
      this.dutyList = []
      this.orgList = []
      this.loading = true
      if (data) {
        this.$emit('dClose', data)
      } else {
        this.$emit('dClose')
      }
    },
    selectName(data) {
      this.onClose(data)
    }
  }
}
</script>

<style></style>
